﻿
@{
    ViewData["Title"] = "AreaDailyList";
}

@section Scripts
    {
    <link href="~/css/page.css" rel="stylesheet" />
    <script src="~/echats/echarts.js"></script>
    <script type="text/javascript">
        var selfLayer = null, page = 1, active = null;
        layui.use(['layer', 'table', 'laydate', 'treeSelect'], function () {
            var layer = layui.layer //弹层
                ,
                table = layui.table, form = layui.form, treeSelect = layui.treeSelect; //表格
            layui.laydate.render({
                elem: '#vardateTime',
                range: '~'
            })
            //地区
            treeSelect.render({
                // 选择器
                elem: '#varProjectName',
                // 数据
                data: '/User/GetAreaTreeAll?code=' + localStorage.getItem("X-AreCode"),
                // 请求头
                //  headers: { 'Authorization': 'Bearer ' + localStorage.getItem("X-TOKEN") },

                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '地区',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: true
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function (d) {
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    console.log(d);
                    //                选中节点，根据id筛选
                    // treeSelect.checkNode('pidSelect', $("#varProjectName").val());

                    // console.log($('#varProjectName').val());

                    //                获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('varProjectName');
                    console.log(treeObj);

                    //                刷新树结构
                    treeSelect.refresh('pidSelect');
                }
            });

            myEcharts();


            //执行一个 table 实例
            table.render({
                id: 'dataList',
                elem: '#dataview',
                height: 'full-80',
                url: "/SummaryReport/GetAreaReport",
                headers: { 'Authorization': 'Bearer ' + localStorage.getItem("X-TOKEN") },
                request: {
                    pageName: 'index' //页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                },
                where: { type: "0" },
                height: 350,
                parseData: function (res) { //res 即为原始返回的数据
                    console.log(res);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.result.data //解析数据列表
                    };
                },
                response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                },
                done: function (res, curr, count) {
                    page = curr;
                },
                page: false,
                cols: [
                    [
                        { field: 'name', title: '城市', width: '20%' },
                        { field: 'applyNum', title: '申请数量', width: '20%' },
                        { field: 'twoToExamineNum', title: '审批数量', width: '20%' },
                        { field: 'threeToExamineNum', title: '配发数量', width: '20%' },
                        { field: 'useNum', title: '使用数量', width: '20%' }
                    ]
                ]
            });

            //图表1
            function myEcharts(unCode, date) {
                var myChart = echarts.init(document.getElementById("main"));

                axios({
                    method: 'get',
                    url: '/SummaryReport/GetAreaReport',
                    params: {
                        unCode: unCode,
                        date: date
                    },
                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem("X-TOKEN") }
                }).then(function (result) {
                    console.log("1234567");
                    console.log(result.data);
                    if (result.data.code == "200") {
                        var data = [];
                        var data2 = [];
                        var data3 = [];
                        for (var i = 0; i < result.data.result.data.length; i++) {
                            var namei = $.inArray(result.data.result.data[i].name, data);
                            if (namei == -1) {
                                data.push(result.data.result.data[i].name);
                            }
                            var titlei = $.inArray(result.data.result.data[i].type, data2);
                            if (titlei == -1) {
                                data2.push(result.data.result.data[i].type);
                            }
                        }
                        var maxindexvalue = 0;
                        for (var j = 0; j < data2.length; j++) {
                            var data4 = [];
                            for (var k = 0; k < result.data.result.data.length; k++) {
                                if (data2[j] == result.data.result.data[k].type) {
                                    data4.push(result.data.result.data[k].value);
                                    if (maxindexvalue < Number(result.data.result.data[k].value)) {
                                        maxindexvalue = Number(result.data.result.data[k].value);
                                    }
                                }
                            }
                            data3.push(data4);
                        }
                        maxindexvalue = Math.ceil(maxindexvalue * 1.5);
                        var data5 = [];
                        for (var i = 0; i < data3.length; i++) {
                            data5.push({
                                name: data2[i],
                                data: data3[i],
                                type: 'bar'
                            });
                        }
                        var option = {
                            color: ['#47F4F6', '#FF4DA4', '#A67EFF', '#FFCD57', '#63E3BB', '#D955FF', '#3D98E5', '#FF8CBF', '#1FCFFF', '#FF9149', '#6CFF9B', '#FFE59F', '#2BECFF', '#D17AFF', '#5489FF', '#7EA5FF', '#72FFE1', '#FF7F87', '#34B3FF', '#FF8F7F'],
                            title: {
                                text: '区域汇总统计',
                                left: 'center',
                                top: 20,
                                textStyle: {
                                    fontSize: 16,
                                    fontWeight: 'bolder',
                                    //  color: '#fff'
                                }
                            },
                            legend: {
                                type: 'scroll',
                                textStyle: {
                                    // color: '#fff',
                                    fontSize: 14
                                },
                                x: 'center',
                                y: 50,
                                data: data2
                            },
                            grid: {
                                left: '10%',     //图表距离左右上下之间的距离
                                top: '30%',
                                bottom: '100px',
                                containLabel: false
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            toolbox: {
                                x: 'right',
                                y: 50,

                                feature: {
                                    magicType: {
                                        show: true,
                                        type: ['line', 'bar'],
                                        title: { line: '折线图切换', bar: '柱形图切换' },
                                        iconStyle: {
                                            //  borderColor: '#fff',
                                            emphasis: {
                                                textPosition: 'top'
                                            }
                                        }
                                    },
                                    saveAsImage: {
                                        show: true,
                                        title: '下载',
                                        iconStyle: {
                                            //  borderColor: '#fff',
                                            emphasis: {
                                                textPosition: 'top'
                                            }
                                        }
                                    }
                                }
                            },
                            xAxis: {
                                name: "时间",
                                axisLabel: {
                                    //  color: "#fff",
                                    rotate: 60,
                                    interval: 0
                                },
                                type: 'category',
                                axisLine: {    // 轴线
                                    show: true,
                                    lineStyle: {
                                        // color: '#fff',
                                        width: 1
                                    }
                                },
                                data: data
                            },
                            yAxis: {
                                type: 'value',
                                name: '标识数量/件',
                                max: maxindexvalue,
                                splitNumber: 10,
                                axisLabel: {
                                    interval: 'auto',
                                    rotate: -15,
                                    margin: 18,
                                    //  color: "#fff",
                                    formatter: '{value}'
                                },
                                axisLine: {    // 轴线
                                    show: true,
                                    lineStyle: {
                                        //  color: '#fff',
                                        type: 'solid',
                                        width: 1
                                    }
                                }
                            },
                            series: data5
                        };
                        myChart.setOption(option);
                    } else {
                        alert(result.Msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            };

            var $b = layui.$;
            active = {
                reload: function () {
                    var unCode = $("#varProjectName").val();
                    var date = $("#vardateTime").val();

                    console.log("258963147");
                    console.log(unCode);
                    console.log(date);

                    //执行重载
                    table.reload('dataList', {
                        //page: {
                        //    curr: page || 1 //重新从第 1 页开始
                        //},
                        where: {
                            unCode: unCode,
                            date: date,
                        }

                    });
                    myEcharts(unCode, date)
                }
            };
            $b('#search').on('click', function () {
                var type = $b(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听工具条
            table.on('tool(datalist)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'del') {
                    layer.confirm('数据删除不能恢复，您要继续？', function (index) {
                        layer.close(index);

                        axios.delete('/Enterprise/DelectEnterprise', {
                            params: {
                                enterpriseId: data.id
                            }
                        }).then(function (response) {
                            if (response.data.code == 200) {
                                obj.del();
                                layer.msg("刪除成功", { icon: 1, time: 800, });
                                location.reload();
                            } else {
                                alert(response.data.msg)
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    });
                } else if (layEvent === 'edit') {
                    window.location.href = "/Enterprise/Edit/" + data.id;
                }
            });

        });
    </script>
}

<blockquote class="layui-elem-quote layui-text layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">地区：</label>
        <div class="layui-input-inline">
            <input type="text" id="varProjectName" lay-filter="tree" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">时间：</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="vardateTime" name="vardateTime" style="width:240px" placeholder="yyyy-MM-dd">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-form-label">
            <button class="layui-btn" id="search" style="width: 60px; height: 28px; line-height: 28px; display: inline" data-type="reload">搜索</button>
        </div>
    </div>
</blockquote>
<br />
<div id="main" style="height: 400px; width: 90%; min-width:300px;"></div>@*height: 450px; min-width:300px; background:rgba(0,0,0,.5)*@
<br />

<table class="layui-hide" id="dataview" lay-filter="datalist"></table>

